<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="aside">
      <div class="img">
        <div class="img_content">
          <img :src="imgg" />
        </div>
        <div class="text">
          <p>管理员</p>
        </div>
      </div>
      <el-menu
      router
      v-for="item in LeftList" :key="item.menu_id"
        class="el-menu-vertical-demo"
        default-active="2"
        style="
          --el-menu-hover-bg-color: #ea0b0b;
          --el-menu-hover-color: #011725;
        "
      >
        <el-menu-item :index="item.url" @click="active(item.name)" :class="titlee == item.name ? 'active' :''">
          <el-icon><icon-menu /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
</template>

<script setup lang="ts">
import {storeToRefs} from 'pinia'
import {ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {useLogin} from '../../stores/user'
const userStore=useLogin()
const {LeftList}=storeToRefs(userStore)
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const route = useRoute()
const routes = ref([])
routes.value = route.matched[0].children.filter(
  (item) => item.meta.title !== '首页'
);
const defaultt = ref()
defaultt.value = route.fullPath
const titlee =ref()
const active = (title)=>{
  titlee.value = title
}
const imgg = ref()
onMounted(()=>{
  const img = localStorage.getItem('img')
  titlee.value = route.meta.title
  imgg.value = img

})
</script>

<style scoped lang="scss">
.aside {
  width: 100%;
  .img{
    width: 100%;
    height: 150px;
    .img_content{
      margin-left: 50px;
      padding-top: 10px;
      box-sizing: border-box;
      img{
        width: 80px;
        height: 80px;
        border-radius: 100%
        
      }
    }
    .text{
      margin-left: 71px;
      padding-top: 15px;
      box-sizing: border-box;
      p{
        color:white;
      }
    }
  }
  :deep(.el-menu) {
    width: 100%;
    .el-menu-item {
      height: 50px;
      background: #000e17;
      // border-bottom: 1px #eeeeee solid;
      color: #a6b0b6;
      &:hover {
        color: white;
        // background: red;
      }
    }
    .active{
      color: white;
      background: red;
    }
  }
}
</style>